/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-show="hide" class="container-box">
		<view class="container">
			<view class="nav">
				<navigator @tap="changeTab1" class="nav-item" :class="order_by=='default'?'red':''" data-order_by="default" data-href=" " role="navigation">
					综合
					<view class="ico-dg">
						<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
					</view>
				</navigator>
				<navigator @tap="changeTab" class="nav-item" :class="order_by=='orderby_sales_sum'?'red':''" data-order_by="orderby_sales_sum" :data-href="requestData.orderby_sales_sum" role="navigation">销量</navigator>
				<navigator @tap="changeTab" :data-price="1" class="nav-item" :class="order_by=='orderby_price'?'red':''" data-order_by="orderby_price" :data-href="requestData.orderby_price" role="navigation">
					 <!-- :class="[activeUrl!='order_by=shop_price'?'':]" -->
					价格    
					<view class="ico-dir" :class="[priceScreening?'':(!ascending?'ico-dir-up':'ico-dir-dn')]" :style="'background-image:url('+imgUrl+szjxImg+')'"></view>
				</navigator>
				<navigator @tap="openFilterModal"  class="nav-item" role="navigation" :class="order_by=='orderby_filter'?'red':''" data-order_by="orderby_filter">
					筛选
					<view class="ico-filter">
						<image class="wh100" :src="imgUrl+'common/xx.png'" role="img"></image>
					</view>
				</navigator>
				<navigator  class="nav-item search" url="/pages/goods/search/search" role="navigation">
					<image class="wh100 search-img" :src="imgUrl+'common/search.png'" role="img"></image>
				</navigator>
			</view>
			<view class="choice_list">
				<block v-for="(item,index) in goodsData" :key="index">
					<navigator class="choice_item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id" role="navigation">
						<view class="img-wrap">
							<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img">
								
							</image>
							<!-- <text class="Seconds_kill">
							</text> -->
						</view>
						<view class="item-cont">
							<view class="title">{{item.goods_name}}</view>
							<view class="price">￥{{item.shop_price.toFixed(2)}}</view>
							<view class="comment">评论{{item.comment_count}} 销量{{item.show_sale_sum}}</view>
							<view @tap.stop="openSpecModel" class="carts" :data-goods_id="item.goods_id">
								<image :src="imgUrl+'common/shopc.png'" role="img"> </image>
							</view>
						</view>
					</navigator>
				</block>
				

			</view>
		</view>
		<!-- 筛选 -->
		<view :hidden="openModel">
			<view @tap="closeFilterModal" class="cover-layer"></view>
			<view class="filter-modal">
				<!-- <icon @tap="closeFilterModal" class="modal-close" color="gray" size="22" type="cancel" role="img"></icon> -->
				<closeicon @click="closeFilterModal" class="modal-close" color="gray" size="22" type="close" role="img"></closeicon>
				<button @tap="restoreData" class="viewall-btn" role="button" aria-disabled="false">显示全部分类</button>
				<block v-for="(item,index) in filterAttr" :key="index" v-if="filterAttr.length>0">
					<view class="filter-box">
						<view class="filter-name">{{item.name}}</view>
						<view class="filter-items">
							<block v-for="(item2,ind) in item.item" :key="ind">
								<view @tap="filterGoods" class="filter-item" :data-href="item2.href">{{item2.name}}</view>
								
							</block>
						</view>
					</view>
				</block>
				
				<view class="filter-box" v-if="filterPrice.length>0">
					<view class="filter-name">价格区间</view>
					<block v-for="(item,ind) in filterPrice" :key="ind" v-if="filterPrice.length>0">
						<view class="filter-items">
							
							<view @tap="filterGoods" class="filter-item" :data-href="item.href">{{item.name}}</view>
								
							
						</view>
					</block>
				</view>
				<block v-for="(item,index) in filterBrand" :key="index" v-if="filterBrand.length>0">
					<view class="filter-box">
						<view class="filter-name">{{item.name}}</view>
						<view class="filter-items">
							
							<view @tap="filterGoods" class="filter-item" :data-href="item.href">{{item.name}}</view>
								
						
						</view>
					</view>
				</block>
				
			</view>
		</view>
		<!-- 规格弹窗 -->
		<!-- <view :hidden="openSpecModalActive">
		    <view class="cover-layer" @tap="closeSpecModal"></view>
		    <view class="spec-model">
		     <closeicon @click="closeSpecModal" class="modal-close" color="gray" size="22" type="close" role="img"></closeicon>
		       <view class="spec-goods">
		            <image class="wh100 spec-img" :src="goodsInfo.original_img"></image>
		            <view class="spec-goods-info">
		                <view class="spec-goods-name">{{goodsInfo.goods_name}}</view>
		                <view  class="spec-goods-price">￥
						
						{{skuInfo?skuInfo.shop_price:goodsInfo.shop_price}}
						 </view>
		                <view class="spec-goods-price">￥{{skuInfo?skuInfo.cost_price:goodsInfo.market_price}} </view>
		                <view class="spec-goods-stock">剩余库存：{{skuInfo?skuInfo.store_count:goodsInfo.store_count}}</view>
		            </view>
		        </view>
		        <view class="spec-name">数量</view>
		       <view class="count">
		       	<view @tap="subCartNum" class="sub">-</view>
		       	<input @blur="inputCartNum" v-model="goodsInputNum" type="number"  >
		       	</input>
		       	<view @tap="addCartNum" class="add">+</view>
		       </view>
			   <view class="spec-box">
		        <block v-for="(item,n) in specification" :key="n">
		        	<view>
						<view class="spec-name">{{item.name}}</view>
						<block v-for="(item,index) in item.spec_item_list" >
							
							<view @tap="selectSpec(item.id,n,$event,index)" class="spec-btn " :class="[subIndex[n]==index?'spec-btn-click':'']"  :data-id="item.id" :data-index="n" >{{item.item}}</view>
						</block>
					</view>
		        	
		        </block>
				</view>
		        <view class="spec-cart-btn " :class="[skuInfo.prom_id<=0||skuInfo.store_count<=0 ? 'spec-cart-disable':'']" @tap="buyNow">发起拼团</view>
		    </view>
		</view> -->
		<view :hidden="openSpecModalActive">
		   <view class="cover-layer" @tap="closeSpecModal"></view>
		     <view class="spec-model">
		         <closeicon @click="closeSpecModal" class="modal-close" color="gray" size="22" type="close" role="img"></closeicon>
		        <view class="spec-goods" v-if="goodsInfo">
		            <image mode="aspectFill" class="wh100 spec-img" :src="goodsInfo.original_img.indexOf('public')==1?hostUrl+goodsInfo.original_img:goodsInfo.original_img"></image>
		            <view class="spec-goods-info">
		                <view class="spec-goods-name">{{goodsInfo.goods_name}}</view>
		                <view class="spec-goods-price"><text>￥</text><text>{{skuInfo?skuInfo.shop_price:goodsInfo.shop_price}}</text>
		                        <view class="spec-goods-stock">剩余库存:{{skuInfo?skuInfo.store_count:goodsInfo.store_count}}</view>
		                </view>
		            </view>
		        </view>
		        <block v-for="(item,n) in specification" :key="n">
		        	<view>
		        		<view class="spec-name">{{item.name}}</view>
		        		<block v-for="(item,index) in item.spec_item_list" >
		        			
		        			<view @tap="selectSpec(item.id,n,$event,index)" class="spec-btn " :class="[subIndex[n]==index?'spec-btn-click':'']"  :data-id="item.id" :data-index="n" >{{item.item}}</view>
		        		</block>
		        	</view>
		        	
		        </block>
		        <view class='spec-box'>
		          <view class="spec-name">数量</view>
		          <view class="count">
		              <view class="sub" @tap="subCartNum">-</view>
		            	<input @blur="inputCartNum" v-model="goodsInputNum" type="number"  >
		              <view class="add" @tap="addCartNum">+</view>
		          </view>
		        </view>
		        
		         <block>
		               
					<view @tap="addCart" class="spec-cart-btn spec-buy " :class="[goodsInfo.store_count<=0?'spec-cart-disable':'']" data-action="buy">确定</view>
		        </block>
		    </view>
		</view>
		
		<!-- 没有数据 -->
		<view class="no-data" v-if="!goodsData.length>0">
			
			<image class="cart-image" :src="imgUrl+'cart/cart-null.png' "role="img"></image>
			<view class="no-data-title">没有相关的数据</view>
			<navigator class="lookat" open-type="switchTab" url="../../index/index" role="navigation"> 去逛逛 </navigator>
		</view>
	</view>
</template>
<script>
	import {getGoods,getGoodsFilter,getBrandList,getPrice,getSpecification,getSku,getGoodsInfo,getCartList,searchGoods} from "../../../api/api.js";
	import config from "@/api/config.js";
	import closeicon from "@/components/uni-icons/uni-icons.vue";
	import common from "@/common/common";
	import {mapState} from 'vuex';
	export default {
		props:{
			hide:{
				type:Boolean,
				default:true
			},
			
		},
		data() {
			return {
				hostUrl:config.host,//图片路径前缀
				imgUrl:config.imgUrl,
				openModel:true,//弹框显隐
				order_by:"default",
				p:1,//商品初始数据默认为9
				requestData:"",//筛选请求的数据
				activeUrl:"",//动态切换url
				request1:"",
				szjxImg:'common/sxjt.png',
				filterAttr:"",//筛选属性
				filterBrand:"",//品牌筛选
				filterPrice:"",//价格筛选
				total:0,//0条数据
				cat_id:"",//商品id
				brandId:"",//品牌id
				goodsData:[],//商品列表
				openSpecModalActive: true, //是否打开规格弹窗
				skuInfo:"",//商品不同规格的信息
				itemId:"",//sku中的item_id
				prom_type:"",//判断是否有活动
				specification:"",//规格
				pricePlan:"",//价格方案
				 subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				 goodsAttr: [], //商品规格参数
				 selectArr:[],//存放被选中的值
				 goodsInfo:"",
				 goodsInputNum:1,//选中的商品数
				 select: { //选择的商品规格参数
				 	keyName:"",//规格名
				 	
				 },
				 goods_id:"",//商品id
				 searchName:"",//搜索
				 priceScreening:true, //价格筛选
				 ascending:true, //升序
			};
		},
		components:{
			closeicon
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth'])
		},
		onLoad(options){
			console.log(this.brandId)
			// this.brandId=options.cat_id;
			this.cat_id = options.cat_id;
			this._getGoods(this.cat_id,this.p);	
		},
		methods:{
			_getGoods(id,p){//商品列表
				getGoods(id,p).then(res=>{
					console.log(res)
					this.goodsData=this.goodsData.concat(res.records);
					this.total=res.total;
					var request='cat_id='+ id
					this._getGoodsFilter(request);
				})
			},
			/*执行品牌街方法*/
			getbarand(){
				console.log(this.brandId)
				// if(this.brandId!=""){
				// 	this._getBrandList(this.brandId,this.size)
				// }
				let params={
					words:this.searchName
				}
				this.searchGoods(params)
				
			},
			searchGoods(params){
				searchGoods(params).then(res=>{
					console.log(res)
					this.goodsData=res.records;
					this.total=res.total;
					
					var request='words='+ this.searchName
					// console.log(request)
					this._getGoodsFilter(request);
				})
			},
			_getBrandList(id,p){//品牌街 商品列 （用于搜索）
				// console.log(this.brandId)
				getBrandList(id,p).then(res=>{
					
					this.goodsData=this.goodsData.concat(res.records);
					this.total=res.total;
					this.brandId=id;
					var request='brand_ids='+ id
					// console.log(request)
					this._getGoodsFilter(request);
				})
			},
			_getGoodsFilter(url){
				getGoodsFilter(url).then(res=>{
					console.log(url)
					console.log(res)
					this.requestData=res;
					this.filterAttr=res.filter_attr;
					this.filterBrand=res.filter_brand;
					this.filterPrice=res.filter_price;
				})
			},
			onReachBottom(){//下拉加载数据
				console.log("滚动加载")
				if(this.goodsData.length===this.total){
					uni.showToast({
					    title: '加载完了',
					    duration: 2000
					});
					 return false;
				}
				this.p++;
				this._getGoods(this.cat_id,this.p);
				
			},
			changeTab1(e){//综合默认
				this.p=1;
				this.goodsData.length=0;
				this.order_by=e.currentTarget.dataset.order_by;
				if(this.cat_id){
					this._getGoods(this.cat_id,this.p);
				}else{
					this._getBrandList(this.brandId,this.p)
				}
			},
			changeTab(e){//切换筛选
				this.goodsData.length=0;
				this.order_by=e.currentTarget.dataset.order_by;
				
				var hrefData=e.currentTarget.dataset.href.split("&")
				var price=e.currentTarget.dataset.price
				console.log(hrefData)
				if(price){
					hrefData.forEach((i,index)=>{
						if(i=="order_by=shop_price"){
							this.priceScreening=false
							if(i=="sort=desc"){
								this.ascending=true
							}
								this.ascending=!this.ascending
						}
					})
				}else{
					this.priceScreening=true
					this.ascending=false
				}
				
				this.request(e.currentTarget.dataset.href)
				
				
				
				
				
			},
			request(e){
				var that=this;
				uni.request({
				 url:'/api' +'/mall/goods/page?'+ e,
				 // data,
				
				 header:{
				     'content-type': 'application/json' // 默认值
				 },
				
				 success:function(res){
					
				   console.log(res)
				   var request1=e.replace(/&/g,"%26");
				   that._getGoodsFilter(request1)
					that.goodsData=res.data.records;
				    
				 },
				 fail:function(res){
				   
				 },
				 complete:function(){
				    
				 }
				 })
			},
			filterGoods(e){ //筛选列表
				var hrefData=e.currentTarget.dataset.href.split("&")
				this.order_by='orderby_filter'
				this.activeUrl=hrefData;
				this.request(e.currentTarget.dataset.href)
				// this.request(e)
				this.openModel=true;
				// this.openModel=true;
			},
			/*所有规格商品价格*/ 
			getPrice(id){//获取规格价格 先要获取价格才能获取规格
				getPrice(id).then(res=>{
					if(res.length>0){
					
						console.log(res);
						this.pricePlan=res;
						this.getSpecification(this.goods_id);
						
						
						/*获取价格区间*/
						let price=[]
						res.forEach((item,i)=>{
							// console.log(item.price)
							price.push(item.price)
						})
						// console.log(price)
						// var max=price[0];//最大值
						// var min=price[0];//最小值
						// price.forEach((i,ind)=>{
						// 	if(i>max){
						// 		max=i;
						// 	}
						// 	if(i<min){
						// 		min=i;
						// 	}
						// })
						// // console.log(max,min)
						// this.maxPrice=max;
						// this.minPrice=min;
						// return max,min;
						
						
						
					}else{
						var params={
							id:this.goods_id,
							isTeam:true,
							itemId:""
						}
						this.getSku(params)
					}
				})
			},
			/*显示全部分类 重置数据*/
			restoreData(){
				let pages=getCurrentPages()
				let router=pages[0].route
				console.log(router)
				/*判断是搜索页面还是列表页面*/
				if(router=="pages/goods/search/search"){
					let params={
						goods_name:this.searchName
					}
					this.searchGoods(params)
					
				}else{
					this._getGoods(this.cat_id,this.p);	
				}
				// console.log(router)
				this.openModel=true;
			},
			/*商品所有规格*/
			getSpecification(goodsId){
				getSpecification(goodsId).then(res=>{
					console.log(res)
					this.specification=res;
				})
			},
			getSku(params){//获取规格参数
				getSku(params).then(res=>{
					console.log(res)
					/*规格有可能是0*/
					if(res){
					
						this.skuInfo=res;
						this.itemId=res.item_id;
						this.prom_type=res.prom_type
					
						var price = res.shop_price;
							price=price.toFixed(2)
						let priceArr = price.split(".");
						this.price = priceArr;
					}
					
				})
			},
			selectSpec(item,n,event,index){//选择规格
				var self=this;
				console.log(item)
				if (self.selectArr[n] != item) {
					self.selectArr[n] = item;
					self.subIndex[n] = index;
				} else {
					self.selectArr[n] = "";
					self.subIndex[n] = -1;
				}
				self.checkItem()
				
				// console.log(self.selectArr.length)
				var result1="";
				if(self.selectArr.length>1){
					var resultArr=[]
					this.selectArr.forEach((i,ind)=>{
						resultArr.push(JSON.stringify(i))
						resultArr=resultArr.reverse()
					})
					result1=resultArr.join("_")
				}else{
					// var result2=JSON.stringify(item)
					var resultArr=[]
					this.selectArr.forEach((i,ind)=>{
						resultArr.push(JSON.stringify(i))
					})
					result1=resultArr;
				}
				this.pricePlan.forEach((i,ind)=>{
						// console.log(i.key)
					if(i.key!=result1){//不相等 有可能是倒序了  
						var resultArr=[];
						resultArr=result1.toString().split("_");
						result1=resultArr.reverse();
						result1=result1.join("_")
					}	
					if(i.key==result1){
						
						console.log(result1)
						this.pricePlan.item_id=i.item_id;
						this.select.keyName=i.key_name;
						console.log("等于",ind)
						var params={
							id:this.goods_id,
							isTeam:true,
							itemId:this.pricePlan.item_id
						}
						this.getSku(params)
					}
				})
			},
			checkItem: function() {
				var self = this;
				var option = self.specification;
				var result = []; //定义数组存储被选中的值
				for (var i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : '';
				}
				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].list) {
						result[i] = option[i].list[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						
					}
					
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}
			
				self.$forceUpdate(); //重绘
			},
			/*主体商品信息*/ 
			getGoodsInfo(params) {
				getGoodsInfo(params).then(res => {
					console.log(res)
					if (res) {
						this.goodsInfo = res;
						// this.goodsInfo.goods_content = res.goods_content.replace(/<img/gi, "<img style='width:100%'");
					}
			
				})
			},
			inputCartNum(){
				/*输入数>库存数 =库存数*/
				if(this.goodsInputNum>this.goodsInfo.store_count){
					this.goodsInputNum=this.goodsInfo.store_count
				}
				if(this.inputCartNum<=0){
					this.inputCartNum=1
				}
			},
			addCartNum(){//数量
				if(this.goodsInputNum<this.goodsInfo.store_count){ //小于库存
					this.goodsInputNum++
				}
				
			},
			subCartNum(){ //减
				if(this.goodsInputNum>1){
					this.goodsInputNum--;
				}
			},
			/*直接购买*/ 
			openSpecModel(e){
				let loginInfo = uni.getStorageSync('loginInfo') || null //登录信息
				if (loginInfo != null) {
					console.log(e)
					let goods_id=e.currentTarget.dataset.goods_id
					this.goods_id=goods_id;
					/*所有规格商品的价格*/ 
					this.getPrice(goods_id);
					this.getGoodsInfo(goods_id)
					this.openSpecModalActive=false
					// this.getSpecification(goods_id)
					// var that=this;
					// let params={
					// 	"goods_id":that.goods_id,
					// 	"goods_num":that.goodsInputNum,
					// 	"item_id":that.skuInfo.item_id,
					// 	"team_id":that.treamInfo.team_id
					// }
					// that.postTreamOrder(params)
				}else{
					common.islogin()
				}
			},
			/*下单*/ 
			addCart(e){
				let action=e.currentTarget.dataset.action
				let params={
					"goods_id":this.goods_id,
					"goods_num":this.goodsInputNum,//商品数量
					"item_id":this.itemId||0
				}
				let is_virtual=this.goodsInfo.is_virtual; //1 虚拟商品 0 普通商品
				/*虚拟商品暂时注释*/ 
				/*if(is_virtual==1){
					common.toast("none","虚拟商品购买功能暂不支持!",3000)
					return;
				}else{
					this._getCartList(params)
				}*/
				this._getCartList(params)
				console.log(this.goodsInfo)
				// 
			},
			/*获取购物车订单 && 立即购买*/
			_getCartList(params){
				getCartList(params).then(res=>{
					console.log(res)
					if(res){
						this.openSpecModalActive = true;
						uni.navigateTo({
							url:`/pages/cart/cart2/cart2?goods_id=${this.goods_id}&goods_num=${this.goodsInputNum}&item_id=${this.itemId}`
						})
					}
				})
			},
			/*关闭弹窗*/ 
			closeSpecModal(){
				this.openSpecModalActive=true
			},	
			openFilterModal(){
				this.openModel=false;
			},
			closeFilterModal(){
				this.openModel=true;
			}
		}
	}
</script>

<style lang="scss">
	/* goodsList.wxss */
	.container {
	    color: #666;
	}
	.container-box{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.nav-item{
	    float: left;
	    width: 22.5%;
	    height: 90rpx;
	    line-height: 90rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 28rpx;
	    border-bottom: 1px solid #f3f3f3;
	    background-color: #fff;
	}
	.nav-item .ico-dg{
	    width: 18rpx;
	    height: 12rpx;
	    margin-left: 10rpx;
	    line-height: 0;
	}
	.nav-item .ico-filter{
	    width: 20rpx;
	    height: 20rpx;
	    margin-left: 10rpx;
	    line-height: 0;
	}
	.ico-dir{
	    width: 16rpx;
	    height: 22rpx;
	    margin-left: 10rpx;  
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position-x: 0;
	}
	.ico-dir-dn {
	    background-position-x: -16rpx;
	}
	.ico-dir-up {
	    background-position-x: -32rpx;
	}
	.search{
	    width: 10%
	}
	.search-img{
	    width: 30rpx;
	    height: 30rpx;
	}
	.choice_list{
	    background-color: #fff;
	}
	.choice_item{
	    position: relative;
	    width: 100%;
	    min-height: 200rpx;
	    padding: 10rpx 0;
	    border-bottom: 1px solid #f3f3f3;
	    font-size: 28rpx;
	}
	.img-wrap{
	    float: left;
	    width: 180rpx;
	    height: 180rpx;
	    padding:0 10rpx 10rpx;
	    position: relative;
	}
	.Seconds_kill{
	    background:#ff3b3b;
	    padding:4rpx 22rpx 4rpx 28rpx;
	    text-align:center;
	    border-radius:0 100rpx 100rpx 0;
	    color:#fff;
	    font-size:26rpx;
	    position:absolute;
	    top:30rpx;
	    left:10rpx;
	}
	.img-wrap image{
	    width: 100%;
	    height: 100%;
	}
	.item-cont .title{
	    height: 72rpx;
	    margin: 16rpx 0;
	    padding-right: 10rpx;
	    line-height: 36rpx;
	    color: #333;
	    overflow: hidden;   
	}
	.price{
	    display: inline-block;
	    color: #ff3b3b;
	    padding-bottom: 20rpx;
	}
	.comment{
	    font-size: 25rpx;
	}
	.carts image{
	    width:44rpx;
	    height:44rpx;
	    position:absolute;
	    right:20rpx;
	    bottom:10rpx;
	}
	/* 弹框相关 */
	.filter-modal{
	    position: fixed;
	    left: 150rpx;
	    top: 0;
		// #ifdef H5
			top: 80rpx;
		// #endif
	    right: 0;
	    bottom: 0;
	    z-index: 20;
	    background-color: white;
	    overflow-x: hidden;
	    padding-bottom: 30rpx;
	}
	.filter-box{
	    box-sizing: border-box;
	    width: 100%;
	    font-size: 28rpx;
	    padding: 20rpx;
	}
	.filter-name{
	    width: 100%;
	    padding: 20rpx 0;
	    word-break: keep-all;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    font-size: 30rpx;
	}
	.filter-items{
	    width: 100%;
	}
	.filter-item{
	    float: left;
	    width: fit-content;
	    max-width: 500rpx;
	    word-break: keep-all;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    padding: 10rpx;
	    border-radius: 10rpx;
	    border: 1rpx solid #f3f3f3;
	    margin: 0 10rpx 10rpx 0;
	    background-color: #fdfdfd;
	    color: #666;
	}
	.viewall-btn{
	    margin-top: 20rpx;
	    width: 300rpx;
	}
	/* 加规格弹窗 */
	.spec-model{
	    position:fixed;
	    bottom:0;
	    background:white;
	    width:100%;
	    padding:0 30rpx;
	    font-size:32rpx;
	    box-sizing:border-box;
	    overflow-x:hidden;
	    z-index:9999;
	}
	.cover-layer{
	    z-index: 20;
	}
	
	.spec-goods{
	    padding: 15rpx 0 30rpx;
	    float: left;
	    width: 100%;
	    border-bottom: 1px solid #f3f3f3;
	}
	.spec-img{
	    float: left;
	    height: 180rpx;
	    width: 180rpx;
	    margin-top:16rpx;
	}
	.spec-goods-info{
	    float: left;
	    padding: 0 25rpx; 
	    width: 430rpx;
	}
	.spec-goods-name{
	    font-size: 30rpx;
	    line-height: 35rpx;
	    height: 70rpx;
	    margin: 15rpx 20rpx 25rpx 0;
	    overflow:hidden;
	    text-overflow:ellipsis;
	    display:-webkit-box;
	    -webkit-box-orient:vertical;
	    -webkit-line-clamp:2;
	
	}
	.spec-goods-price{
	    color: #ff3b3b;
	    font-size: 36rpx;
	    font-weight: bold;
	}
	.spec-goods-price text{
	    font-size: 22rpx;
	}
	.spec-goods-stock{
	    margin-top: 10rpx;
	    font-size: 26rpx;
	    color: #999999;
	    font-weight:500;
	}
	.spec-box{
	  width: 100%;
	  height: 50rpx;
	  overflow: hidden;
	  margin-top: 50rpx;
	}
	.spec-name{
	    float: left;
	    width: 150rpx;
	    font-size: 32rpx;
	}
	.spec-btn{
	    color: black;
	    background-color: #efefef;
	    font-size: 24rpx;
	    line-height: 48rpx;
	    float: left;
	    height: 48rpx;
	    padding: 0 24rpx;
	    border: 1rpx solid #f3f3f3;
	    margin: 4rpx 20rpx 4rpx 0;
	    border-radius: 24rpx;
	    overflow: hidden;
	}
	.spec-btn-click{
	    color: #ff3b3b;
	    background-color: #ffefef;
	    border: 1rpx solid #ff3030;
	}
	.spec_types{
	  width: 100%;
	  height: auto;
	  overflow: hidden;
	  padding-top: 20rpx;
	}
	.count{
	    float: right;
	    width: 184rpx;
	    height: 50rpx;
	    font-size: 32rpx;
	    font-weight: bold;
	}
	.count>view,.count>input{
	    float: left;
	    width: 60rpx;
	    height: 50rpx;
	    line-height: 50rpx;
	    text-align: center;
	}
	.spec-cart-btns{
	    width: 100%;
	    line-height: 68rpx;
	    margin: 54rpx auto 32rpx;
	    height: 68rpx;
	}
	.spec-cart-btn{
	    float: left;
	    width: 690rpx;
	    height: 68rpx;
	    font-size: 30rpx;
	    text-align: center;
	    color: white;
	    border-radius: 34rpx;
	    line-height: 68rpx;
	}
	.spec-buy{
	    background-color: #ff3b3b;
	    margin:54rpx auto 32rpx;
	}
	

</style>
